$menu-bg-color1: $primary-color;
$menu-bg-color2: #FF4D4F;
$menu-bg-color3: #FA8D15;
$menu-bg-color4: #16C2C0;
$menu-bg-color5: #369E0E;
$menu-bg-color6: #2F54EB;
$menu-bg-color7: #9154DE;

.learun-theme-nav-side2 {

  .learun-container {
    padding-left: $side2-width;
  }

  .learun-header {
    padding-left: $side2-width + 16px;
    background-color: white;

    &:after {
      background-color: $border-color-split;
    }

    .learun-header-logo .text {
      color: $heading-color;
    }

    .el-avatar {
      background-color: $primary-color-light;
      color: $primary-color;
    }

    &--icon-btn {
      color: $text-color-secondary;

      &:hover {
        color: $text-color-secondary;
      }

      &:not(.noBg):before {
        content: ' ';
        position: absolute;
        height: 24px;
        width: 24px;
        //background-color: $background-color;
        border-radius: 16px;
        top: 0;
        left: 8px;
        border: 1px solid $background-color;
      }
    }

  }

  .learun-sidebar {
    z-index: 1027;
    width: $side2-width;

    &__collapse {
      display: none;
    }

    .learun-el-menu {
      &.el-menu {
        width: $side2-width;
      }

      .el-menu-item,
      .el-submenu__title {
        height: 96px;
        padding: 0 !important;
        width: 100%;

        &:before {
          content: '' !important;
          display: block;
          top: 0;
          bottom: 48px;
          left: 16px;
          right: 16px;
          border-radius: $border-radius-base;
        }
      }

      .el-menu-item:nth-of-type(7n+1),
      .el-submenu:nth-of-type(7n+1) .el-submenu__title {
        &:before {
          background-color: $menu-bg-color1 !important;
        }
      }

      .el-menu-item:nth-of-type(7n+2),
      .el-submenu:nth-of-type(7n+2) .el-submenu__title {
        &:before {
          background-color: $menu-bg-color2 !important;
        }
      }

      .el-menu-item:nth-of-type(7n+3),
      .el-submenu:nth-of-type(7n+3) .el-submenu__title {
        &:before {
          background-color: $menu-bg-color3 !important;
        }
      }

      .el-menu-item:nth-of-type(7n+4),
      .el-submenu:nth-of-type(7n+4) .el-submenu__title {
        &:before {
          background-color: $menu-bg-color4 !important;
        }
      }

      .el-menu-item:nth-of-type(7n+5),
      .el-submenu:nth-of-type(7n+5) .el-submenu__title {
        &:before {
          background-color: $menu-bg-color5 !important;
        }
      }

      .el-menu-item:nth-of-type(7n+6),
      .el-submenu:nth-of-type(7n+6) .el-submenu__title {
        &:before {
          background-color: $menu-bg-color6 !important;
        }
      }

      .el-menu-item:nth-of-type(7n+7),
      .el-submenu:nth-of-type(7n+7) .el-submenu__title {
        &:before {
          background-color: $menu-bg-color7 !important;
        }
      }



      .el-menu__item-wraper {
        flex-direction: column;
      }

      .el-menu__icon {
        line-height: 48px;
        font-size: 20px;
        color: #fff !important;
      }

      .el-menu__text {
        height: 16px;
        width: 100%;
        visibility: visible;
        line-height: 16px;
        text-align: center;
        margin-top: 8px;
        font-size: 12px;
        color: #fff !important;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }


    }
  }


  /*菜单选项卡调整*/
  .learun-tags {
    .el-tabs--card>.el-tabs__header .el-tabs__nav {
      padding-top: 0;
    }

    .el-tabs--card>.el-tabs__header .el-tabs__item {
      height: $tag-height;
      line-height: $tag-height;
      color: $text-color-secondary;

      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        height: 2px;
        left: 50%;
        right: 50%;
        background: $primary-color;
        transition: all .3s;
      }

      &.is-active {
        color: $primary-color;
        background: transparent !important;

        &:after {
          left: 8px;
          right: 8px;
        }
      }

      &:hover {
        color: $primary-color;
      }

      .el-icon-close:hover {
        background-color: $primary-color  !important;
      }
    }
  }

}